<template>
  <div ref="artPlayerContainer" class="artplayer-container"></div>
</template>
  
  <script setup>
import {
  ref,
  onMounted,
  computed,
  onBeforeUnmount,
  watch,
  reactive,
} from "vue";
import Artplayer from "artplayer"; //视频播放器
import artplayerPluginDanmuku from "artplayer-plugin-danmuku"; //弹幕库
import useVideoStore from "../stores/useVideoStore";
import videoHttp from "../api/videoHttp";
import useUserStore from "../stores/useUserStore";
const userStore = useUserStore()
const videoStore = useVideoStore();
const artPlayerContainer = ref(null); // 获取ref绑定容器DOM元素
var player = null; //播放器对象

//默认数据

const playVideoDate = ref(null);

//创建播放器
function createPlayer() {
  player = new Artplayer({
    container: artPlayerContainer.value, // 绑定到 ref 的容器
    id: "your-url-id", // 只用于记忆播放
    // 数据
    url: playVideoDate.value.videoUrl, // 视频 URL
    poster: playVideoDate.value.videoPoster, //视频的海报，只会出现在播放器初始化且未播放的状态下
    //基础
    theme: "green", // 主题色 进度条 音量条等颜色
    volume: 0.7, // 默认音量 --没看见效果
    hotkey: true, // 启用快捷键
    miniProgressBar: true, // 迷你进度条
    //自动
    autoSize: true, //自动调整播放器尺寸以隐藏黑边
    autoMini: true, // 播放器滚动到浏览器视口以外时,自动进入迷你播放模式--没看见
    autoplay: false, //自动播放
    //底部控制栏
    screenshot: false, //显示视频截图功能 提示由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
    fullscreen: true, //显示播放器窗口全屏按钮
    pip: true, // 在底部控制栏里显示 画中画 的开关按钮
    //设置面板
    setting: true, // 设置面板
    flip: true, // 显示视频翻转功能
    playbackRate: true, // 显示视频播放速度功能
    aspectRatio: true, // 显示视频长宽比功能
    //移动端
    playsInline: true, // 移动端 playsInline 模式
    lock: true, // 移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
    fastForward: true, // 移动端添加长按视频快进功能
    autoOrientation: true, // 是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
    airplay: true, // 显示 airplay 按钮
    //替换默认图标
    icons: {
      loading: '<img src="https://artplayer.org/assets/img/ploading.gif">', //加载图标
      state:
        '<img width="150" heigth="150" src="https://artplayer.org/assets/img/state.svg">', //暂停图标
      indicator:
        '<img width="16" heigth="16" src="http://localhost:8080/EMO//musicImages//aaaa.jpg">', //进度条图标
      // indicator: '<img width="16" heigth="16" src="https://artplayer.org/assets/img/indicator.svg">',//进度条图标
    },
    //鼠标触摸显示预览图
    //https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail
    thumbnails: {
      //url: "https://artplayer.org/assets/sample/thumbnails.png",
      url: playVideoDate.value.videoThumbnail,
      number: playVideoDate.value.thumbnailNumber,
      width: 160,
      height: 90,
      column: 10,
    },
    //配置
    plugins: [
      //配置弹幕
      artplayerPluginDanmuku({
        danmuku: playVideoDate.value.videoDanmukuList, //弹幕数据
        //修改默认
        speed: 8, //弹幕持续时间，范围在[1 ~ 10]
        lockTime: 1, // 输入框锁定时间，范围在[1 ~ 60]
        theme: "light",
        width: 650, // 当播放器宽度小于此值时，弹幕发射器置于播放器底部
        mount: undefined,
        synchronousPlayback: false, // 是否同步播放速度
        antiOverlap: true, // 弹幕是否防重叠
        //这是用户在输入框输入弹幕文本，然后点击发送按钮后触发的函数可以对弹幕做合法校验，或者做存库处理
        // 当返回true后才表示把弹幕加入到弹幕队列
        async beforeEmit(danmu) {
          // 把弹幕存到数据库
          const state = await saveDanmu(danmu);
          return state;
        },
      }),
    ],
  });
}

//计算id，看看id变了吗
const vid = computed(() => {
  return videoStore.nowVideoId;
});
//id变化触发播放音乐事件
watch(vid, (newVal, oldVal) => {
    playVideo(videoStore.nowVideoInfo);
});

//播放视频
function playVideo(nowVideoInfo) {
  console.log("播放视频" , nowVideoInfo);

  //播放器播放该音乐 -音乐数据 
  player.url = nowVideoInfo.videoUrl;
  //修改弹幕数据  -弹幕数据 
  player.plugins.artplayerPluginDanmuku.config({
    danmuku: nowVideoInfo.videoDanmukuList,
  });
  //重新加载弹幕
  player.plugins.artplayerPluginDanmuku.load();
  //修改缩略图
  player.thumbnails = {
        url: nowVideoInfo.videoThumbnail,
        number: nowVideoInfo.thumbnailNumber,
        column: 10,
  } 
  //开始播放
  player.play();
}

//保存弹幕到数据库
//danmu({text: '是这个吗', mode: 0, color: '#FE0302', time: 16.761502})
async function saveDanmu(danmu) {
  videoHttp.addVideoDanmu(userStore.userId,videoStore.nowVideoId,danmu).then((res)=>{
    //console.log(res.data);
  })
  //当数据成功存到数据库后就返回true，弹幕才会发送到面板
  return true;
}

// 组件挂载时初始化 ArtPlayer
onMounted(() => {
  //初始化 初始化结束后自动创建视频对象
  initVideo()
});

//初始化一个视频
function initVideo() {
  const localStorageVideo = JSON.parse(localStorage.getItem("video"));
  //如果本地没有数据就去请求一个
  //console.log(playVideoDate.value);
  if(localStorageVideo == null){
    videoHttp.getVideoByVideoId(1,1).then((res)=>{
      playVideoDate.value = res.data
    }).then(()=>{
      createPlayer()
    })
    //如果本地有数据就从本地拿数据
  }else{
    //有数据就使用再创建视频播放器
    playVideoDate.value = videoStore.nowVideoInfo
    createPlayer()
  }

}

// 组件卸载时销毁播放器实例
// onBeforeUnmount(() => {
//   if (player) {
//     player.destroy();
//   }
// });
</script>
  
  <style scoped>
.artplayer-container {
  width: 100%;
  height: 100%;
}
</style>